<template>
  <div v-loading="loading" element-loading-text="保存中" class="room-config">
    <div class="form">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-suffix="："
        label-width="120px"
        size="small"
      >
        <!-- 启用按钮 -->
        <el-form-item :label="'开启'+tabNameOptions[tabName]+'预订'" label-width="150px">
          <el-switch v-model="form.state" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-collapse-transition>
          <el-card v-if="form.state" style="marginBottom:20px;">
            <app-main-sub-title title="基础设置" />
            <el-form-item label="业务别称" prop="alias">
              <el-input
                v-model.trim="form.alias"
                maxlength="9"
                placeholder="请输入业务别称"
                show-word-limit
                style="width:250px"
              />
            </el-form-item>
            <el-form-item v-if="tabName!=='fullDayRoom'" label="可提前预订" class="is-required">
              <el-form-item prop="needPreBookingDays">
                <span>最少需提前&nbsp;&nbsp;</span>
                <el-select v-model="form.needPreBookingDays" style="width:150px" placeholder="请选择">
                  <el-option v-for="(v,i) in 366" :key="i" :label="i" :value="i" />
                </el-select>
                <span>&nbsp;&nbsp;天预订</span>
              </el-form-item>
              <el-form-item prop="preBookingDays">
                <span>最多可提前&nbsp;&nbsp;</span>
                <el-select v-model="form.preBookingDays" style="width:150px" placeholder="请选择">
                  <el-option v-for="(v,i) in 366" :key="i" :label="i" :value="i" />
                </el-select>
                <span>&nbsp;&nbsp;天预订</span>
              </el-form-item>
            </el-form-item>
            <el-form-item label="最晚确认时间" prop="latestConfirmTime">
              <span>顾客下单后&nbsp;&nbsp;</span>
              <el-select v-model="form.latestConfirmTime" style="width:150px" placeholder="请选择">
                <el-option
                  v-for="item in latestConfirmTimeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>&nbsp;&nbsp;小时后未确认订单自动取消，并给顾客全额退款
            </el-form-item>
            <el-form-item label="预订后取消" prop="cancelRule">
              <el-radio-group v-model="form.cancelRule">
                <el-form-item>
                  <el-radio :label="0">订单确认后不可取消</el-radio>
                </el-form-item>
                <el-radio v-if="tabName==='fullDayRoom'" :label="1">
                  <el-form-item style="display: inline-block" prop="cancelLatestFreeTime">
                    <span>当天&nbsp;&nbsp;</span>
                    <el-time-select
                      v-model="form.cancelLatestFreeTime"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '21:30'
                      }"
                      :disabled="form.cancelRule!==1"
                      style="width:150px"
                      placeholder="请选择时间"
                    />
                    <span>&nbsp;&nbsp;前可免费取消，其他时间不可取消</span>
                  </el-form-item>
                </el-radio>
                <el-radio v-else :label="3">
                  <el-form-item style="display: inline-block" prop="cancelLatestFreeMinute">
                    <span>到店时间前&nbsp;&nbsp;</span>
                    <el-select
                      v-model="form.cancelLatestFreeMinute"
                      style="width:150px"
                      :disabled="form.cancelRule!==3"
                      placeholder="请选择时间"
                    >
                      <el-option
                        v-for="(v,i) in cancelLatestFreeMinuteOptions"
                        :key="i"
                        :label="v.label"
                        :value="v.value"
                      />
                    </el-select>
                    <span>&nbsp;&nbsp;小时可免费取消，其他时间不可取消</span>
                  </el-form-item>
                </el-radio>

                <br>
                <el-radio :label="2">
                  <span>取消费用占订单实付金额的&nbsp;&nbsp;</span>
                  <el-form-item style="display: inline-block" prop="cancelChargeRatio">
                    <el-input
                      v-model.trim="form.cancelChargeRatio"
                      :disabled="form.cancelRule!==2"
                      style="width:150px"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="过期未消费" prop="overdueRefundType">
              <el-radio-group v-model="form.overdueRefundType">
                <el-radio :label="0">不退款</el-radio>
                <el-radio :label="1">全额退款</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="在线支付渠道" prop="payChannels">
              <el-checkbox-group v-model="form.payChannels">
                <el-checkbox v-for="(v,k,i) in payChannelsOptions" :key="i" :label="k">{{ v }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
            <app-main-sub-title title="预订须知" />
            <div v-if="tabName==='fullDayRoom'">
              <el-form-item label="最早到店时间" prop="earliestCheckTime">
                <el-time-select
                  v-model="form.earliestCheckTime"
                  :picker-options="{
                    start: '06:00',
                    step: '01:00',
                    end: '24:00',
                  }"
                  style="width:150px"
                  default-value="12:00"
                  placeholder="请选择时间"
                />
              </el-form-item>
              <el-form-item label="最晚离店时间" prop="latestDepartureTime">
                <el-time-select
                  v-model="form.latestDepartureTime"
                  :picker-options="{
                    start: '06:00',
                    step: '01:00',
                    end: '24:00',
                  }"
                  style="width:150px"
                  default-value="14:00"
                  placeholder="请选择时间"
                />
              </el-form-item>
            </div>
            <el-form-item label="须知" prop="customFields">
              <el-input
                v-model.trim="form.remark"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5}"
                maxlength="250"
                placeholder="请输入内容"
                style="width:500px"
              />
            </el-form-item>
          </el-card>
        </el-collapse-transition>
        <el-form-item>
          <el-button type="primary" round size="small" @click="submit">保 存</el-button>
          <el-button round size="small" @click="initData">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { saveShopManageCategoryConfig } from '../../../api/shop'
import { validateCustomPositiveInt } from '@/utils/validate'
export default {
  props: {
    configForm: {
      type: Object,
      require: true
    },
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    /**
       * 表单校验方法相关
       */
    // 最少可提前多少天预订
    const validateNeedPreBookingDays = (rule, value, callback) => {
      if (!value && value !== 0) {
        callback(new Error('请选择最多可提前多少天预订'))
      } else if (value - this.form.preBookingDays > 0) {
        callback(new Error('不能大于最多可提前天数'))
      } else {
        this.$refs.form.clearValidate(['preBookingDays'])
        callback()
      }
    }

    // 最多可提请多少天预订
    const validatePreBookingDays = (rule, value, callback) => {
      if (!value && value !== 0) {
        callback(new Error('请选择最多可提前多少天预订'))
      } else if (value - this.form.needPreBookingDays < 0) {
        callback(new Error('不能小于最少可提前天数'))
      } else {
        this.$refs.form.clearValidate(['needPreBookingDays'])
        callback()
      }
    }
    // 取消最晚时间
    const validateCancelLatestFreeTime = (rule, value, callback) => {
      if (this.form.cancelRule === 1) {
        if (!value) {
          callback(new Error('请选择可取消时间'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 取消费用百分比
    const validateCancelChargeRatio = (rule, value, callback) => {
      if (this.form.cancelRule === 2) {
        if (!value) {
          callback(new Error('请输入取消费用百分比'))
        } else if (!validateCustomPositiveInt(value, 2, [0, 100, '0', '100'])) {
          callback(new Error('请输入1~100正整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        // 可提前预定天数
        needPreBookingDays: [
          {
            required: true,
            validator: validateNeedPreBookingDays
          }
        ],
        preBookingDays: [
          {
            required: true,
            validator: validatePreBookingDays
          }
        ],
        // 最晚确认时间
        latestConfirmTime: [
          {
            required: true,
            message: '请选择最晚确认时间'
          }
        ],
        // 预订后取消
        cancelRule: [
          {
            required: true,
            message: '请选择预订后是否取消',
            trigger: ['change']
          }
        ],
        // 取消最晚时间
        cancelLatestFreeTime: [
          {
            required: true,
            validator: validateCancelLatestFreeTime
          }
        ],
        cancelLatestFreeMinute: [
          {
            required: true,
            validator: validateCancelLatestFreeTime
          }
        ],
        // 取消费用百分比
        cancelChargeRatio: [
          {
            required: true,
            validator: validateCancelChargeRatio
          }
        ],
        // 过期未消费
        overdueRefundType: [
          {
            required: true,
            message: '请选择过期是否退款',
            trigger: ['change']
          }
        ],
        // 支付方式
        payChannels: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一种支付渠道'
          }
        ],
        // 最早到店时间
        earliestCheckTime: [
          {
            required: true,
            message: '请选择最早到店时间'
          }
        ],
        // 最晚到店时间
        latestDepartureTime: [
          {
            required: true,
            message: '请选择最晚离店时间'
          }
        ]
      },
      // 配置
      latestConfirmTimeOptions: [
        {
          value: 60,
          label: '1'
        },
        {
          value: 120,
          label: '2'
        },
        {
          value: 180,
          label: '3'
        }
      ],
      cancelLatestFreeMinuteOptions: [
        {
          value: 30,
          label: '0.5'
        },
        {
          value: 60,
          label: '1'
        },
        {
          value: 90,
          label: '1.5'
        },
        {
          value: 120,
          label: '2'
        },
        {
          value: 150,
          label: '2.5'
        },
        {
          value: 180,
          label: '3'
        }
      ],
      tabNameOptions: {
        fullDayRoom: '全日房',
        ktvRoom: 'KTV',
        hourRoom: '钟点房'
      },
      payChannelsOptions: { 0: '微信支付', 1: '会员钱包' },
      // 状态
      loading: false, // 状态
      // 数据
      form: {},
      defaultForm: {}
    }
  },
  watch: {
    tabName(val) {
      this.initData()
    },
    'form.cancelRule'(val) {
      if (val !== 1 || val !== 3) {
        this.$refs.form.clearValidate(['cancelLatestFreeTime'])
        this.$refs.form.clearValidate(['cancelLatestFreeMinute'])
      }
      if (val !== 2) {
        this.$refs.form.clearValidate(['cancelChargeRatio'])
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 设置表单初始数据
    initData() {
      this.form = Object.assign({}, this.configForm[this.tabName])
    },

    /**
       * 按钮组
       */
    // 保存
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = Object.assign({}, this.form)
          if (params.state === 0) {
            params = {
              state: params.state,
              shopId: params.shopId,
              type: params.type
            }
          } else {
            if (params.type === 0) {
              params.preBookingDays = 0
              params.needPreBookingDays = 0
            }
            params.payChannels = params.payChannels.join(',')
            switch (params.cancelRule) {
              case 0:
                params.cancelLatestFreeTime = ''
                params.cancelLatestFreeMinute = ''
                params.cancelChargeRatio = ''
                break
              case 1:
                params.cancelLatestFreeMinute === ''
                params.cancelChargeRatio = ''
                break
              case 2:
                params.cancelLatestFreeTime = ''
                params.cancelLatestFreeMinute = ''
                break
              case 3:
                params.cancelLatestFreeTime === ''
                params.cancelChargeRatio = ''
                break
            }
          }
          this.loading = true
          saveShopManageCategoryConfig(params)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.configForm[this.tabName] = Object.assign({}, this.form)
            })
            .catch(() => {})
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
